/**
 * 样衣上传
 */
import * as React from 'react'
import { Card, Form, Input, Button, Select, Radio, message } from 'antd'
import Authentication from '../../router/Authentication'
import { PageHeaderLayout, SignleUpload } from '../../components'
import { FormComponentProps } from 'antd/lib/form/Form'
import { post, get, CREATE_SAMPLE, SUBMIT_SAMPLE } from '../../service/api'
const FormItem = Form.Item
const Option = Select.Option
const RadioGroup = Radio.Group
export interface Props{
  record: any
  band: any
  user: any
  history: any
  submitting: boolean,
  coopers: any []
}

export interface State {
  id?: string,
  myZhengMianPic: any
}

@Authentication
class ThdemandInfo extends React.Component<Props & FormComponentProps, State> {
  myZhengMianPic: any = {}//正面照
  myBeiMianPic: any = {}//背面照
  myDetailPic: any = {}//细节照
  myXiaoGuoPic: any = {}//效果图
  myYanSePic: any = {}//颜色图

  state = {
    id: '',
    myZhengMianPic: {}
  }
  getPic (pic: any []): string {
    if(pic && pic.length>0) return pic[0].guid
    else return ''
  }
  //提交
  handleSubmit = (e: any) => {
    e.preventDefault()
    if(!this.state.id) {
      message.error('请先保存样衣信息')
    }else {
      get(SUBMIT_SAMPLE, {id: this.state.id}).then((res => {
        if (res.code == '1') message.success('操作成功！')
        else message.error(res.errMsg)
      }))
    }
  }
  //保存
  handleSave = (e: any) => {
    e.preventDefault()
    this.props.form.validateFieldsAndScroll((err: any, values: any) => {
      if (!err) {
        values.pic1=this.getPic(this.myZhengMianPic.getFiles())
        values.pic2=this.getPic(this.myBeiMianPic.getFiles())
        values.pic3=this.getPic(this.myDetailPic.getFiles())
        values.pic4=this.getPic(this.myXiaoGuoPic.getFiles())
        values.pic5=this.getPic(this.myYanSePic.getFiles())
        post(CREATE_SAMPLE, values).then((res: any) => {
          if (res.code == '1') {
            message.success('操作成功！')
            this.setState({
              ...this.state,
              id: res.id
            })
          }else {
            message.error(res.errMsg)
          }
        })
      }
    })
  }
  render () {
    const { id } = this.state
    const { record, user, form, submitting, band, coopers } = this.props
    const { getFieldDecorator } = form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 34 },
        sm: { span: 12 },
        md: { span: 15 },
      },
    }
    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    }
    return (
      <PageHeaderLayout 
        title = "">
        <Card bordered={false}>
          <Form onSubmit={this.handleSave} hideRequiredMark style={{ marginTop: 8 }}>
            <FormItem label="样衣图片" {...formItemLayout}>
              <SignleUpload name="正面图" ref={(obj) => {this.myZhengMianPic=obj}}/>
              <SignleUpload name="背面图" ref={(obj) => {this.myBeiMianPic=obj}}/>
              <SignleUpload name="细节图" ref={(obj) => {this.myDetailPic=obj}}/>
              <SignleUpload name="效果图" ref={(obj) => {this.myXiaoGuoPic=obj}}/>
              <SignleUpload name="颜色图" ref={(obj) => {this.myYanSePic=obj}}/>
            </FormItem>
            <FormItem label="波段号" {...formItemLayout}>
              {getFieldDecorator('bandid', { initialValue: band.id })(
                <span className="ant-form-text">{record.bandname}</span>
              )}
            </FormItem>
            <FormItem label="供应商编码" {...formItemLayout}>
              {getFieldDecorator('supplierid', { initialValue: user.venderInfo.Id })(
                <span className="ant-form-text">{user.venderInfo.Id}</span>
              )}
            </FormItem>
            <FormItem label="供应商名称" {...formItemLayout}>
              <span className="ant-form-text">{user.venderInfo.Name}</span>
            </FormItem>
            <FormItem label="风格" {...formItemLayout}>
              <span className="ant-form-text">{`${record.dlText}-${record.xlText}`}</span>
            </FormItem>
            <FormItem label="供应商货号" {...formItemLayout}>
              {getFieldDecorator('pcode', { rules: [{ required: true, message: '请输入供应商货号' }]})(
                <Input placeholder="请输入供应商货号"/>
              )} 
            </FormItem>
            <FormItem {...formItemLayout} label="合作方式">
              {getFieldDecorator('jyfs')(
                <Select
                  placeholder="请选择合作方式"
                >
                  {coopers.map( (cooper: any) => (
                    <Option key={cooper.value} value={cooper.value}>{cooper.label}</Option>
                  ))}
                </Select>
              )}
            </FormItem>
            <FormItem label="主荐款" {...formItemLayout}>
              {getFieldDecorator('ismain', { initialValue:"0" })(
                <RadioGroup>
                  <Radio value="1">是</Radio>
                  <Radio value="0">否</Radio>
                </RadioGroup>
              )}
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              {id==''?(<Button type="primary" htmlType="submit" loading={submitting}>
                保存
              </Button>):
              (<Button style={{ marginLeft: 8 }} onClick = { this.handleSubmit }>提交</Button>)}
              <Button style={{ marginLeft: 8 }} onClick={()=>{this.props.history.goBack()}} >返回</Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderLayout>
    )
  }
}

export default Form.create()(ThdemandInfo)
